import { useMemo } from 'react';
import JsonView from 'react18-json-view'
import 'react18-json-view/src/style.css'
import styles from './index.less';

const Index = ({ src, ...props }: any) => {
  const code = useMemo(() => {
    if (!src || Array.isArray(src) || typeof src !== 'object') {
      return {};
    } else {
      return src;
    }
  }, [src]);
  return (
    <div className={styles.json}>
      <JsonView
        name={false}
        collapseStringsAfterLength={true}
        collapsed={false}
        style={{
            maxHeight: '300px',
            overflow: 'scroll',
        }}
        src={code}
        {...props}
      />
    </div>
  );
};

export default Index;
